<script setup lang="ts">
import { storeToRefs } from "pinia";
import SpuTable from "@/views/product/spu/components/spuTable/spuTable.vue";
import SpuForm from "@/views/product/spu/components/spuForm/spuForm.vue";
import SkuForm from "@/views/product/spu/components/skuForm/skuForm.vue";
import useSpuStore from "@/pinia/modules/product/spuStore/spuStore.ts";

const spuStore = useSpuStore();
const { screen } = storeToRefs(spuStore);
</script>

<template>
  <div class="spu">
    <tab-nav></tab-nav>
    <transition name="slide-fade" mode="out-in">
      <!--展示SPU的表格-->
      <el-card v-if="screen===0">
        <spu-table></spu-table>
      </el-card>
      <!-- 添加或者修改SPU的结构-->
      <el-card v-else-if="screen===1">
        <spu-form></spu-form>
      </el-card>
      <!-- 添加SKU的结构-->
      <el-card v-else>
        <sku-form></sku-form>
      </el-card>
    </transition>
  </div>
</template>

<style scoped lang="scss">
.spu {
  .el-card {
    margin-bottom: 10px;
  }
}
</style>
